<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>蜗牛拍拍后台管理</title>
<link rel="stylesheet" th:href="@{/lay/layui/css/layui.css}" />
<link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/layer/mobile/need/layer.css}" />
<!-- <link rel="stylesheet" th:href="@{/lay/layui/css/layer/default/layer.css}" /> -->


<link rel="stylesheet" th:href="@{/date/flatpickr.css}" />
<script th:src="@{/lay/layui/layui.js}"></script>
	<!-- js -->
	<script th:src="@{/moon/js/jquery.js}"></script>
	<script th:src="@{/moon/js/vue.js}"></script>
<!-- 	<script th:src="@{/layer/layer.js}"></script> -->
	<script th:src="@{/date/flatpickr.js}"></script>
	<script th:src="@{/moon/js/jquery.time.js}"></script>
	<!-- <script th:src="@{/My97DatePicker/WdatePicker.js}"></script> -->
	<script th:src="@{/page/jqpaginator.js}"></script>




</head>


<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
	<!-- 内容主体区域 -->

    	<div style="padding: 15px;">

	<div class="container-fluid" id="app">
		<!-- <div class="row">
			<div class="col p-4 text-center text-white shadow font-weight-bolder"
				style="background-color: #343A40;">蜗 牛 拍 拍 后 台</div>
		</div> -->
		<div class="row m-2 font-weight-bolder">
			<div class="form-inline">
				<div class="ml-2">
					总收入:{{revenue}}元
				</div>
				<div class="ml-2">
					资金流水:{{funds}}元
				</div>
			</div>
		</div>
		<div class="row mt-2 float-right">
			<div class="form-inline">
				<div class="col-md-3"></div>
				<input type="text" class="form-control form-sm-control mr-2"
					placeholder="请输入用户账号" name="buyUserName" id="buyUserName" /> <input
					type="text" class="form-control form-sm-control mr-2"
					placeholder="请输入商品订单号" id="orderGenerateId" name="orderGenerateId">
				<input type="text"
					class="form-control col-md-1 mr-2 flatpickr selector"
					name="startTime" @change="selectFunds()" id="startTime"
					placeholder="起始日期"> <input type="text"
					class="form-control col-md-1 mr-2 flatpickr selector"
					name="endTime" @change="selectFunds()" id="endTime"
					placeholder="结束日期">
				<!-- flatpickr selector -->
				<button class="btn btn-info" id="button" title="搜索"
					data-type="reload">
					<i class="fa fa-search" aria-hidden="true"></i>
				</button>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div class="row mt-3">
			<div id="toolbarDemo"></div>
			<table id="demo" lay-filter="demo"></table>
		</div>
	</div>
	</div>
	</div>
	 <!-- ————————————————————————————底部区域，引入页面—————————————————————— -->


	<script th:inline="javascript">
		//	
						
		var app = new Vue({
			el : "#app",
			data : {
				revenue : 0,
				funds : 0
			},
			methods : {

				//查询收入
				selectFunds : function() {				
					$.post("/auction/Finance/funds", {
						 startTime : "",
						endTime : "", 
					}, function(data) {
						//alert(JSON.stringify(data))
						app.revenue = data.totalRevenue;
						app.funds = data.flowingWater;
						
					});
				}
			},
			
			mounted : function() {
				$(".selector").flatpickr();
				this.selectFunds();
			}
		});
		
		layui.use(['layer','table'], function() {
			var table = layui.table;
			var layer=layui.layer;
			//第一个实例
			table.render({
				elem : '#demo',
				height : 'full-150',
				url : '/auction/Finance/list', //数据接口
				limits: [5,10,20,50],
				page : true,
				limit : 10,
				
				toolbar: '#toolbarDemo',
				id : 'restReload',
				totalRow: true,
				cols : [ [ //表头				
				 {
					field : 'financeid',
					title : 'ID',
					width : 120,
					sort : true,
					fixed: 'left', 
					unresize: true, 
					 totalRowText: '合计'
				},
				{
					field : 'orderGenerateId',
					title : '订单号',
					width : 220,
					sort : true
				}, {
					field : 'buyUserName',
					title : '买家',
					width : 120,
				}, {
					field : 'sellUserName',
					title : '卖家',
					width : 120
				}, {
					field : 'goodName',
					title : '商品名称',
					width : 120
				}, {
					field : 'dealPrice',
					title : '交易金额',					
					width : 120,
					sort : true
				}, {
					field : 'commission',
					title : '佣金',
					totalRow: true,
					width : 120,
				}, {
					field : 'revenue',
					title : '收入',
					width : 120,
					totalRow: true,
					sort : true
				}, {
					field : 'dealTime',
					title : '交易时间',
					width : 200,
		 			sort : true
				}, {
					field : 'paymentChannel',
					title : '交易方式',
					width : 120,
				} ] ]
				
			});									
			var $ = layui.$, active = {
				reload : function() {
					var orderGenerateId = $('#orderGenerateId');
					var buyUserName = $('#buyUserName');
					var startTime = $('#startTime');
					var endTime = $('#endTime');
					table.reload('restReload', {
						where : {
							buyUserName : buyUserName.val(),
							orderGenerateId : orderGenerateId.val(),
							startTime : startTime.val(),
							endTime : endTime.val(),
						},
						page : {
							curr : 1
						//重新从第 1 页开始
						}
					});
				}
			};
			
			$('#button').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		//
	</script>
</body>
</html>